<template>
  <div id="personMessage">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line"><i class="el-icon-edit-outline"></i>我要报考</el-col>
    </el-row>
    <div class="content">
      <el-row type="flex" class="" justify="center" :gutter="30">
        <el-col :span="11" v-for="(item,key) in test" class="tipMessage">
          <h2>{{item.testName}}</h2>
          <el-card :body-style="{ padding: '0px' }" style="padding: 14px;" > 
            <img src='./assets/2.jpg' class="image" height="250px">
            <div class="">
                <h3>注意事项:</h3>
                            <div v-html="item.bmxz">
                           {{item.bmxz}}
                            </div>
              <div style="text-align: center">
                <el-button type="primary" class="button" @click="goToTest(item.testName)" :disabled="item.disabled">我要报考</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
  
  data () {
    return {
      test:[{
        imgUrl:'',
        testName:'三位一体',
        bmxz:'',
        disabled:true
      },
      {
        imgUrl:'',
        testName:'高水平运动员',
        bmxz:'',
        disabled:false
      }],
      loading:''
    }
  },
  components: { VDistpicker },
   mounted(){
    this.openFullScreen();
    this.getInfo();
   
  },
  methods:{
    getInfo(){
      var that=this;
      this.axios({
        url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/index',
        method:'post',
        headers:{
              "Content-type":"application/json"
            }

      }).then((res)=>{
        console.log(res);
        that.loading.close();
        that.test=res.data.data;
      })
    },
    goToTest(testName){
      if(testName.indexOf("三位一体")>=0){
        this.$router.push('/userHome/test1')
      }else{
        this.$router.push('/userHome/test2')
      }
    },
    openFullScreen() {
        this.loading = this.$loading({
          lock: true,
          text: '拼命加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#personMessage{
  //width:100%;
  //line-height:100%;
  padding:10px;
  .line{
    border-bottom:1px solid #ccc;
    text-align:left;
    height:50px;
    line-height:50px;
    padding-left:10px;
  }
  .content{
    padding:20px;
    text-align:center;
  }
  .image {
    width: 100%;
    display: block;
    border-radius:10px;
  }

 /* 打印准考证*/
  .tipMessage{
    text-align:left;
  }

  .tipMessage ul{
    margin:5px;
  }
  .tipMessage ul li{
   line-height: 30px
  }
  .tipMessage h3{
   height:30px;
   line-height: 30px
  }
  .tipMessage h2{
    text-align: center;
    height:40px;
    line-height: 40px;
    margin-bottom:10px;
    color:#409EFF;
  }
}
</style>
